<html>
<head>	
	<LINK href="./css/common.css" rel="stylesheet" type="text/css">
	<LINK href="./css/grid-editor.css" rel="stylesheet" type="text/css">
	
	<!-- INCLUDE MOSHU'S LIBRARY-->
    <!-- HELPERS-->
    <script type="text/javascript" src="Lib/objects-extensions.js"></script>
    <script type="text/javascript" src="Lib/animation.js"></script>
    <!--Actual lib-->
    <script type="text/javascript" src="Lib/common.js"></script>
	<script type="text/javascript" src="Lib/scene.js"></script>
	<!-- END MOSHU'S -->
	
	
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var IE = false;
    </script>
    <!--[IF IE]>
    <script type="text/javascript">
        IE = true;
    </script>
<![endif]-->
</head>
<body>
	
	<div class="page">
		<div class="page-header ">
			<div class="title">
				<span>Moshu's Canvas Library - Tests</span>		
			</div>		
			<div class="menu"></div>			
		</div>
	
	<div class="page-content" style="">
		<div class="controls-container resizable">
			<div class="properties">
                <div class="property category">
                    Shape management
                </div>
                <div class="property">
                    <div class="label">Create rectangle</div>
                    <div class="value">
                        <input type="button" value="Create" onclick="createRectangle(100,100,50,50)">
                    </div>
                </div>
                <div class="property">
                    <div class="label">Create line</div>
                    <div class="value">
                        <input type="button" value="Create" onclick="createLine(100, 100, 50, 50)">
                    </div>
                </div>
                <div class="property">
                    <div class="label">Create circle</div>
                    <div class="value">
                        <input type="button" value="Create" onclick="createCircle(100, 100, 50)">
                    </div>
                </div>
                <div class="property">
                    <div class="label">Create image</div>
                    <div class="value">
                        <input type="button" value="Create" onclick="createImage(100, 100, 50, 50,'./images/img1.png')">
                    </div>
                </div>
				<div class="property category">
					Selected Shape
				</div>
                <div class="property">
					<div class="label">Id</div>
					<div class="value"><label id="shapeId"></label></div>
                </div>
                <div class="property">
					<div class="label">Name</div>
					<div class="value"><label id="shapeName"></label></div>
                </div>
				<div class="property">
					<div class="label">Type</div>
					<div class="value"><label id="shapeType"></label></div>
                </div>
                <div class="property">                
                    <div class="label">Velocity</div>
					<div class="value">
                        dx: <input id="velocity-dx" type="text" value="" onchange="selectedShape.velocity.dx=parseInt(this.value);" style="width:30%;border:1px solid black;"/>
                        dy: <input id="velocity-dy" type="text" value="" onchange="selectedShape.velocity.dy=parseInt(this.value);" style="width:30%;border:1px solid black;"/>
					</div>
				</div>
				<div class="property">                
                    <div class="label">Acceleration</div>
					<div class="value">
                        dx: <input id="force-dx" type="text" value="" onchange="selectedShape.setForceAx('force',parseInt(this.value))" style="width:30%;border:1px solid black;"/>
                        dy: <input id="force-dy" type="text" value="" onchange="selectedShape.setForceAy('force',parseInt(this.value))" style="width:30%;border:1px solid black;"/>
					</div>
				</div>
			</div>
		</div>
		<div class="canvas-container resizable">
			<canvas width="800" height="500" id="c" style="border:2px solid black;background-image:url('./images/img.jpg')" onmousedown="mouseDown(event)"></canvas>
		</div>
		<div class="io-container section-title resizable">
			<div style="height:10%;">Code samples</div>
			<div id="output" style="width:100%; height:90%;overflow-y:scroll;background:white;color:black;">
				<h2>Available functionalities</h2>
				<strong>Shapes</strong><br>
				<ul>
					<li>Line</li>
                    <li>Arrow</li>
                    <li>PolyLine</li>
                    <li>Rectangle</li>
                    <li>Circle</li>
                    <li>Ellipse</li>
                    <li>Image</li>
                    <li>ImageSprite</li>
				</ul>
                <strong>Integrated animation and simple physics</strong><br>
				<ul>
					<li>Set velocity - var line = new Line2D(10,10,10,10); line.velocity.dx = 20; line.velocity.dy = 10;</li>
                    <li>Set forces - more like accelerations - line.addForce("gravity", 0, 20);</li>
				</ul>		
                <br /><br /><br /><br />		
			</div>
		</div>
	</div>
	<div class="page-footer">
	</div></div>
	<script type="text/javascript">
		$( ".menu" ).load( "partials/menu.html" );
		$( ".page-footer" ).load( "partials/footer.html" );
		//$(".resizable").resizable();
	</script>
	
	<script type="text/javascript">
	    var tempX = 0;
	    var tempY = 0;

	    function getMouseXY(e) {
	        if (IE) { // grab the x-y pos.s if browser is IE
	            tempX = event.clientX + document.body.scrollLeft;
	            tempY = event.clientY + document.body.scrollTop;
	        }
	        else {  // grab the x-y pos.s if browser is NS
	            tempX = e.pageX;
	            tempY = e.pageY;
	        }

	        if (tempX < 0) { tempX = 0; }
	        if (tempY < 0) { tempY = 0; }

	        return {top:tempY, left:tempX};	        
	    }

	    function getOffset (el) {
	        var _x = 0;
	        var _y = 0;
	        while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
	            _x += el.offsetLeft - el.scrollLeft;
	            _y += el.offsetTop - el.scrollTop;
	            el = el.offsetParent;
	        }
	        return { top: _y, left: _x };
	    }

	    function setSelectionRectangle(shape) {
	        if (shape) {
	            var over = 10;
	            selectionRectangle.location.x = shape.location.x - over;
	            selectionRectangle.location.y = shape.location.y - over;
	            selectionRectangle.size.width = shape.size.width + over * 2;
	            selectionRectangle.size.height = shape.size.height + over * 2;
	        }
	        else {
	            selectionRectangle.location.x = 0;
	            selectionRectangle.location.y = 0;
	            selectionRectangle.size.width = 0;
	            selectionRectangle.size.height = 0;
	        }
	    }
	    
	    function mouseDown(e) {
	        var offset = getOffset(document.getElementById("c"));
	        var mousePos = getMouseXY(e);
	        var x = mousePos.left - offset.left;
	        var y = mousePos.top - offset.top;	       	        

	        var shape = scene.getShapeAtPosition(x, y);
	        
	        // unselect all
	        selectShape(null);	        
	        
	        if (shape) {                
	            // found a shape	            
	            if (shape.id != 0) {	                
	                // not the selection rectangle
	                setSelectionRectangle(shape);	                

	                selectShape(shape);
	            }
	        }
	        scene.invalidate();
	    }

	    var selectedShape = null;
	    function selectShape(shape) {
	        selectedShape = shape;
	        if (selectedShape) {
	            $("#shapeId").html(selectedShape.id);
	            $("#shapeName").html(selectedShape.name);
	            $("#shapeType").html(selectedShape.type);
	            $("#velocity-dx").val(selectedShape.velocity.dx);
	            $("#velocity-dy").val(selectedShape.velocity.dy);

	            $("#force-dx").val(selectedShape.getForce('force').ax);
	            $("#force-dy").val(selectedShape.getForce('force').ay);	            
	        }
	        else {
	            $("#shapeId").html("-");
	            $("#shapeName").html("-");
	            $("#shapeType").html("-");
	            $("#velocity-dx").val("-");
	            $("#velocity-dy").val("-");
	            $("#force-dx").val("-");
	            $("#force-dy").val("-");
	        }
	    }

	    var scene = new Scene2D("c");

	    // create borders
	    var borderSize = 20;
        function createBorderRect(x,y,w,h){
            var border = new Rectangle2D(x, y, w, h);
            border.stroke.color = null;
            border.fill.enabled = true;
	        border.fill.color = "#0A1F33";
	        border.zIndex = 0;
	        return border;
        }
        var leftBorder = createBorderRect(0, 0, borderSize, scene.canvas.height);
        var rightBorder = createBorderRect(scene.canvas.width - borderSize, 0, borderSize, scene.canvas.height);
        var topBorder = createBorderRect(0, 0, scene.canvas.width, borderSize);
        var bottomBorder = createBorderRect(0, scene.canvas.height - borderSize, scene.canvas.width, scene.canvas.height);
        scene.add(leftBorder);
        scene.add(rightBorder);
        scene.add(topBorder);
        scene.add(bottomBorder);


        var onMoving = function (args) {
            var onBottom = args.y + args.height > scene.canvas.height - borderSize;
            var onTop = args.y < borderSize;

            var onLeft = args.x < borderSize;
            var onRight = args.x + args.width > scene.canvas.width - borderSize;            
            if (onBottom || onTop || onLeft || onRight) return false;
            else {
                // check for collisions
                if (selectedShape && args.shape.id == selectedShape.id) {
                    setSelectionRectangle(selectedShape);
                }
                return true;
            }
        }

        function createRectangle(x, y, w, h) {
            var obj = new Rectangle2D(x, y, w, h);
            scene.add(obj);
            obj.bind("onmoving", onMoving);
            return obj;
        }
        function createLine(x, y, w, h) {
            var obj = new Line2D(x, y, w, h);
            scene.add(obj);
            obj.bind("onmoving", onMoving);
            return obj;
        }
        function createCircle(x, y, r) {
            var obj = new Circle2D(x, y, r);
            scene.add(obj);
            obj.bind("onmoving", onMoving);
            return obj;
        }
        function createImage(x, y, w, h, src) {
            var obj = new Image2D(x, y, w, h, src);
            scene.add(obj);
            obj.bind("onmoving", onMoving);
            return obj;
        }

	    var selectionRectangle = new Rectangle2D(0, 0, 0, 0);
	    selectionRectangle.id = 0;
	    selectionRectangle.borderRadius = 5;        
	    selectionRectangle.stroke.color = "#888";
	    selectionRectangle.zIndex = 0;
	    scene.add(selectionRectangle);	         
	   
	    //debugger;
	</script>
</body>
</html>